<template>
	<view class="main-container">
		<HeaderBar title="自驾之州" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>
		<view class="swiper-container"> 
			<view class="container">
			   <scroll-view 
			      class="tab-scroll" 
			      scroll-x="true" 
			      scroll-with-animation 
			      :scroll-left="scrollLeft"
			    > 
			      <view 
			        v-for="(item, index) in tabs" 
			        :key="index" 
			        class="tab-item"
			        @click="switchTab(index)"
			      > 
			        <image v-if="currentTab==0 && item.name=='熊猫大道'" class="tab-img" src="http://img.abatour.com/2025-05-10/熊猫大道@3x_1746843249060.png" mode="aspectFit"></image>
					<image v-else-if="currentTab==1 && item.name=='国道317最美景观大道'" class="tab-img" src="http://img.abatour.com/2025-05-10/国道317@3x_1746843278482.png" mode="aspectFit"></image>
					<image v-else-if="currentTab==2 && item.name=='茶马蜀道'" class="tab-img" src="http://img.abatour.com/2025-05-10/茶马@3x_1746843303125.png" mode="aspectFit"></image>
					<image v-else-if="currentTab==3 && item.name=='中国红路'" class="tab-img" src="http://img.abatour.com/2025-05-10/中国红路@3x_1746843328098.png" mode="aspectFit"></image>
					<image v-else-if="currentTab==4 && item.name=='黄河天路'" class="tab-img" src="http://img.abatour.com/2025-05-10/黄河天路@3x_1746843345657.png" mode="aspectFit"></image>
					<image v-else-if="currentTab==5 && item.name=='九黄大道'" class="tab-img" src="http://img.abatour.com/2025-05-10/九黄@3x_1746843367584.png" mode="aspectFit"></image>
					<view v-else class="untabs">{{ item.name }}</view>
			      </view>
			    </scroll-view>
			</view>
			<view class="contener">
				<image class="headImg_icon" src="http://img.abatour.com/2025-05-09/草丛_1746780040280.png" mode=""></image>
				<image class="headImg_map" src="http://img.abatour.com/2025-05-10/微信图片_20250510154131_1746862913365.png" mode=""></image>
				<view class="info-bar">
				  <view class="info-item">
				    <text class="info-main">3–4天</text>
				    <text class="info-sub">游玩天数</text>
				  </view>
				  <view class="divider" />
				  <view class="info-item">
				    <text class="info-main">390km</text>
				    <text class="info-sub">线路里程</text>
				  </view>
				  <view class="divider" />
				  <view class="info-item">
				    <text class="info-main">四季</text>
				    <text class="info-sub">最佳游玩时间</text>
				  </view>
				</view>
				<view style="position: relative;top: 135rpx;left:30rpx;font-size: 36rpx;color: #fff;">路线简介</view>
				<view class="memo-container">
					<image class="memo_icon" src="http://img.abatour.com/2025-05-09/d4059a1feecfd65dceabd02b4a4053d0a52dab5-OTfVdj_1746782091740.png" mode=""></image>
					<image class="memo_more" @click="getStrategyGuide" src="http://img.abatour.com/2025-05-09/自驾攻略 拷贝 6_1746782057040.png" mode=""></image>
				</view>
				<view style="padding-top: 30rpx;line-height: 50rpx;">
					 熊猫大道站位于成都市成华区蓉都大道与熊猫大道交叉口，是成都地铁3号线的地下岛式车站，于2016年7月31日启用[1]。因位于熊猫大道而得名。因临近成都大熊猫繁育研究基地，后增设副站名熊猫基地南大门，但仅在本站使用。
				</view>
			</view> 
		</view>
		<view class="senvice">
			<view class="line-drop">
				<image class="drop-img" src="http://img.abatour.com/2025-05-09/868b669a9a182f193be03ee572c7ec7_1746790241356.png" mode=""></image>
				<view class="drop-container">
					<scroll-view 
				      class="drop-tab-scroll" 
				      scroll-x="true" 
				      scroll-with-animation 
				      :scroll-left="scrolllineLeft"
				    > 
				      <view 
				        v-for="(item, index) in lineTabs" 
				        :key="index"  
						:class="['drop-tab-item', { active: currentlineTab === index }]"
				        @click="switchlineTab(index)"
				      > 
				        <view>
							<image  style="width: 35rpx;height: 35rpx;" :src="currentlineTab === index ? item.activeIcon : item.icon"  mode=""></image>
				        	<view class="">{{ item.name }}</view>
				        </view>
				      </view>
				    </scroll-view>
				</view>
			</view> 
			<!-- 沿途 -->
			<view>
				<view class="line-list" v-for="(item,index) in dataList" :key="index">
					<image class="list-img" :src="item.imgUrl" mode=""></image>
					<view class="list-mian">
						<view class="list-mian-name">{{item.name}}</view>
						<!-- 时间 -->
						<view class="list-mian-date" v-if="currentlineTab == 0">{{item.time}}</view>
						<!-- 标签 -->
						<view class="list-mian-tag" v-if="currentlineTab == 1 || currentlineTab == 2 || currentlineTab == 4 "><span v-for="(tag,idx) in item.tags" :key="idx" style="border: 1px solid #5E9C63;border-radius: 15rpx;padding: 3rpx 10rpx;">{{tag}}</span></view>
						<!-- 车位 -->
						<view class="list-mian-date" v-if="currentlineTab == 5"><span style="color: #5E9C63;">{{item.car}}</span> | {{item.num}}</view> 
						<view class="list-mian-long"><image  style="width: 27rpx;height: 35rpx;position: relative;top: 7rpx;" src="http://img.abatour.com/2025-05-10/dizhi@3x_1746845959152.png"  mode=""></image><span style="margin-left: 15rpx;">距离{{item.address}}km</span></view>
					</view>
					<view class="list-btn">
						<view class="btn" style="background-color: beige;"><image  style="width: 35rpx;height: 25rpx;" src="http://img.abatour.com/2025-05-10/chakan@3x_1746846204255.png"  mode=""></image><span style="margin-left: 10rpx;">查看</span></view>
						<view class="btn" style="background-color: #5E9C63;color: #fff;"><image  style="width: 35rpx;height: 25rpx;" src="http://img.abatour.com/2025-05-10/fenxiangqianwanglianjie@3x_1746846228363.png"  mode=""></image><span style="margin-left: 10rpx;">前往</span></view>
					</view>
				</view>
			</view> 
		</view>
		
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import HeaderBar from "@/components/HeaderBar/index.vue";  
	
	const headerBgc = ref("transparent");
	const titleColor = ref("#2D2D2D");  
	const tabs = [
		{name:'熊猫大道',id:1},
		{name:'国道317最美景观大道',id:2},
		{name:'茶马蜀道',id:3},
		{name:'中国红路',id:4},
		{name:'黄河天路',id:5},
		{name:'九黄大道',id:6},
	]; 
	const currentTab = ref(0); // 当前选中的 tab
    const scrollLeft = ref(0); // 控制滚动条位置
	
	const lineTabs = [
		{name:'景点',icon:'http://img.abatour.com/2025-05-10/jingqu@3x (1)_1746844468500.png',activeIcon:'http://img.abatour.com/2025-05-10/jingqu@3x_1746844268268.png'},
		{name:'酒店',icon:'http://img.abatour.com/2025-05-10/jiudian (3)@3x_1746844293401.png',activeIcon:'http://img.abatour.com/2025-05-10/jiudian (3)@3x (1)_1746844242711.png'},
		{name:'美食',icon:'http://img.abatour.com/2025-05-10/fenzu@3x_1746844321475.png',activeIcon:'http://img.abatour.com/2025-05-10/fenzu@3x (1)_1746844214069.png'},
		{name:'加油站',icon:'http://img.abatour.com/2025-05-10/map-gas-full@3x_1746844343762.png',activeIcon:'http://img.abatour.com/2025-05-10/map-gas-full@3x (1)_1746844184133.png'},
		{name:'充电站',icon:'http://img.abatour.com/2025-05-10/chongdianzhan@3x_1746844373940.png',activeIcon:'http://img.abatour.com/2025-05-10/chongdianzhan@3x (1)_1746844158464.png'},
		{name:'停车场',icon:'http://img.abatour.com/2025-05-10/tingchechang@3x_1746844407558.png',activeIcon:'http://img.abatour.com/2025-05-10/tingchechang@3x (1)_1746844129432.png'},
		{name:'找厕所',icon:'http://img.abatour.com/2025-05-10/cesuo@3x_1746844427948.png',activeIcon:'http://img.abatour.com/2025-05-10/cesuo@3x (1)_1746844054110.png'},
	];
	const currentlineTab = ref(0); // 当前选中的 tab
    const scrolllineLeft = ref(0); // 控制滚动条位置
	const getStrategyGuide =()=>{ 
		uni.navigateTo({
			url:'/fiveMajorSubPack/pages/selfDriving/strategyGuide?info=' + encodeURIComponent(JSON.stringify(tabs[currentTab.value]))
		})
	}
	onPageScroll((e) => { 
		if (e.scrollTop > 110) {
			headerBgc.value = "#ffffff";
			titleColor.value = "#2D2D2D";
		} else {
			headerBgc.value = "transparent";
			titleColor.value = "#2D2D2D";
		}
	})
	// 顶部导航
	const switchTab=(index) => {
      currentTab.value = index;
      // 动态调整滚动条位置
	  if(index == 2){
		scrollLeft.value = (index - 1.8) *800; 
	  }else {
		  scrollLeft.value = (index - 1.8) * 300; 
	  }
    }  
	// 沿途导航
	const switchlineTab=(index) => {
		currentlineTab.value = index; 
		scrolllineLeft.value = (index -2) * 100;  
    }  
	onReachBottom(() => {
		console.log("reachBottom");
	})
	// data
	const dataList = [
		{name:'毕棚沟景区',tags:['标签1','标签标签2','标签标签3'],time:'开园中 08:30-17:00开放',imgUrl:'http://img.abatour.com/2025-05-10/640 (14)_1746846076764.jpg',address:'130.13',car:'车位充足',num:'共25个'},
		{name:'毕棚沟景区',tags:['标签1','标签标签2','标签标签3'],time:'开园中 08:30-17:00开放',imgUrl:'http://img.abatour.com/2025-05-10/640 (14)_1746846076764.jpg',address:'130.13',car:'车位已满',num:'共25个'},
		{name:'毕棚沟景区',tags:['标签1','标签标签2','标签标签3'],time:'开园中 08:30-17:00开放',imgUrl:'http://img.abatour.com/2025-05-10/640 (14)_1746846076764.jpg',address:'130.13',car:'车位充足',num:'共25个'},
	] 
	onLoad(async()=>{
		uni.request({
		  url: 'http://114.55.113.117/map/api/mapLineListApi', // 接口地址
		  method: 'GET',
		  success: (res) => {
		    console.log('请求成功：', res.data); 
		  },
		  fail: (err) => {
		    console.error('请求失败：', err);
		  }
		});

	})
</script>

<style lang="scss" scoped> 
	.main-container { 
		min-height: 100vh;
		background-color:#EFF5E1;
		// overflow-x: hidden;
		:deep(.swiper-container) {
			width: 100%;
			min-height: 800rpx;
			padding-top: 200rpx;
			position: relative;
			--wot-swiper-radius: 0;
			background-image: url('http://img.abatour.com/2025-05-09/矩形 971_1746774722767.png');
			background-position: center center;
			background-size: 100% 100%;
		}
		/* 容器样式 */
		.container {
		  width: 100%;
		}
		
		/* 滚动视图样式 */
		.tab-scroll {
		  white-space: nowrap; /* 防止换行 */
		  overflow-x: auto; /* 水平滚动 */
		  padding: 10px 0;
		}
		
		/* tab 样式 */
		.tab-item {
			height: 130rpx;
			min-width: 220rpx; 
			display: inline-block;
			margin: 0 10px; 
			font-size: 16px;
			color: #333; 
			text-align: center;
			align-items: center;
		} 
		.untabs{ 
			position: relative;
			top: -60rpx;
			height: 130rpx;
			min-width: 220rpx;
		}
		.tab-img{ 
			width: 100%;
			height: 100%;
		}
		.contener{
			padding: 0 3%;
			position: relative;
			top: -120rpx; 
		}
		.headImg_icon{ 
			height: 54rpx; 
			width: 100%; 
		}
		.headImg_map{
			height: 830rpx; 
			width: 100%; 
			margin-top: -10rpx;
		}
		.info-bar {
		  display: flex;
		  position: absolute;
		  top: 700rpx;
		  width: 80%;
		  justify-content: space-around;
		  align-items: center;
		  background-color: rgba(255, 255, 255, 0.75); /* 半透明背景 */
		  border-radius: 16rpx;
		  padding: 20rpx 0;
		  margin: 0 0 0 7%;
		}
		
		.info-item {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		}
		
		.info-main {
		  font-size: 32rpx;
		  font-weight: bold;
		  color: #333;
		}
		
		.info-sub {
		  font-size: 24rpx;
		  color: #666;
		  margin-top: 4rpx;
		}
		
		.divider {
		  width: 2rpx;
		  height: 60rpx;
		  background-color: rgba(0, 0, 0, 0.1);
		}
		.memo-container{ 
			height: 155rpx;
			display: flex;
			justify-content: space-between;
			align-items: baseline;
		}
		.memo_icon{
			width: 200rpx;
			height: 67rpx;
		}
		.memo_more{
			width: 220rpx;
			height: 155rpx;
			animation:
				horizontalMoveReverse 35s linear infinite,
				verticalFloat 3.5s ease-in-out infinite alternate;
		}
		
		@keyframes horizontalMove {
		  from { transform: translateX(-100%); }
		  to { transform: translateX(100vw); }
		}
		
		@keyframes horizontalMoveReverse {
		  from { transform: translateX(100vw); }
		  to { transform: translateX(-100%); }
		}
		
		@keyframes verticalFloat {
		  from { transform: translateY(-10px); }
		  to { transform: translateY(10px); }
		}
		.senvice{
			// height: 40vh; 
			padding: 20rpx 20rpx 120rpx 20rpx;
			border-radius: 20rpx;
			// position: relative;
			// top: -50rpx;
			background-color: #fff; 
			.line-drop{
				display: flex;
				align-items: center;
				.drop-img{
					width: 18%;
					height: 130rpx;
				}
				.drop-container {
					width: 80%;
					align-items: center;
				}
				
				/* 滚动视图样式 */
				.drop-tab-scroll {
					white-space: nowrap;
					overflow-x: auto;
				}
				
				/* tab 样式 */
				.drop-tab-item { 
					min-width: 100rpx; 
					display: inline-block;
					margin: 0 10px; 
					font-size: 16px;
					color: #333; 
					text-align: center;
				} 
				
				.drop-tab-item.active {
					color: #5E9C63; 
				}
			}
			.line-list{ 
				// height: 150rpx;
				margin: 40rpx 0 0 0 ;
				display: flex;
				justify-content: space-between;
				.list-img{
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}
				.list-mian{
					width: 50%;
					.list-mian-name{
						font-size: 33rpx;
						font-weight: 600;
						height: 33%;
					}
					.list-mian-date{
						height: 33%;
						margin-top: 5rpx;
					}
					.list-mian-tag{
						display: flex;
						flex-wrap: wrap;
						gap: 10rpx;
						font-size: 22rpx;
						// height: 33%; 
						margin: 10rpx 0;
					}
					.list-mian-long{
						align-items: center;
						// margin-top: 15rpx;  
						height: 33%;
					}
				}
				.list-btn{
					width: 150rpx;
					text-align: center;
					.btn{
						margin: 10rpx 0 0 0;
						padding:10rpx 0 ;
						align-items: center;
						width: 150rpx; 
						border-radius: 10rpx;
					}
				}
			}
		}
		
		
		
		
		
		
		 
		
	}
</style>